<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="keywords" content="618,电商,购物节,特惠,折扣">
    <meta name="description" content="618电商狂欢节 - 超值特惠">
    <meta name="theme-color" content="#ff4d4f">
    <title>618电商狂欢节 - 超值特惠</title>
    <link rel="shortcut icon" type="images/x-icon" href="images/head.ico">

    <link rel="stylesheet" href="css/index.min.css">
    <link rel="stylesheet" href="css/shop.css">
    <script src="js/XueHua.min.eval.js" charset="utf-8"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="nav-container">
            <a href="index.html" class="nav-logo">618电商狂欢节</a>
            <a href="cart.html" class="nav-cart">
                购物车
                <span id="cart-count" class="cart-count">0</span>
            </a>
        </div>
    </div>

    <div id="app">
        <div class="videozz"></div>
        <audio controls="true" preload="auto" loop autoplay controlslist="nodownload" class="audio"
            style="z-index:99; display: none;">
            <source src="media/5d127dda9b1dd33238d987139cc88e7d.mp3" type="audio/mp3">
        </audio>

        <!-- 主要内容 -->
        <div class="container">
            <!-- 促销横幅 -->
            <div class="banner"
                style="text-align: center; padding: 30px 0; background-color: #fff1f0; margin: 20px 0; border-radius: 8px;">
                <h1 style="color: #ff4d4f; font-size: 32px;">618电商狂欢节 - 限时特惠</h1>
                <p style="color: #666; font-size: 18px; margin-top: 10px;">全场商品低至5折，还有更多惊喜等你发现！</p>
            </div>

            <!-- 商品列表 -->
            <div id="products-grid" class="products-grid">
                <!-- 商品卡片将通过JavaScript动态生成 -->
            </div>
        </div>

        <footer style="text-align: center; padding: 20px; margin-top: 40px; background-color: #f5f5f5;">
            <span>Copyright © 2023. <a href="#" target="_blank">618电商狂欢节 </a>All rights reserved.</span>
        </footer>
    </div>

    <!-- JavaScript -->
    <script src="js/products.js"></script>
    <script src="js/shop.js"></script>
</body>

</html>